<template>
	<div class="zBox">
		<div class="title">
			<span>{{ projectName }}</span>
			<div class="qjBut" @click="handleExport"><span style="vertical-align: middle;margin-left: 8px;">导出excel</span></div>
		</div>
		<el-table class="qjTable" v-loading="loading" :data="tableList" stripe height="600">
			<el-table-column prop="name" label="项目成员" align="center"></el-table-column>
			<el-table-column prop="workHours" label="累计工时(小时)" align="center"></el-table-column>
			<el-table-column prop="deptName" label="所属部门" align="center"></el-table-column>
			<el-table-column label="操 作" align="center" class-name="small-padding">
				<template #default="scope">
					<el-button plain type="danger" size="mini" @click="seeRb(scope.row.name)">查看日报</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination class="pagination" v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
		<el-dialog class="dialog" v-model="dialog" title="工作日报" top="6vh" width="50.5%" @close="clear">
			<div class="top">
				<el-form class="xHeight" :model="queryParams2" ref="queryRef" :inline="true" label-width="100px">
					<el-form-item label="日期">
						<el-date-picker style="height: 40px;" v-model="queryParams2.reportDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"></el-date-picker>
					</el-form-item>
					<el-form-item class="pst">
						<div class="cx" @click="getList2()">查询</div>
						<div class="cz" @click="reset">重置</div>
					</el-form-item>
				</el-form>
			</div>
			<el-table class="qjTable" v-loading="loading2" :data="rbList" stripe height="600">
				<el-table-column prop="" label="日报" align="center">
					<template #default="scope">
						{{
							new Date(scope.row.reportDate).getFullYear() +
								'年' +
								parseInt(new Date(scope.row.reportDate).getMonth() + 1) +
								'月' +
								new Date(scope.row.reportDate).getDate() +
								'日工作日报'
						}}
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="发布日期" align="center"></el-table-column>
				<el-table-column prop="createBy" label="姓名" align="center"></el-table-column>
				<el-table-column label="操 作" align="center" class-name="small-padding">
					<template #default="scope">
						<el-button plain type="danger" size="mini" @click="seeRbDetail(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination class="pagination2" v-show="total2 > 0" :total="total2" v-model:page="queryParams2.pageNum" v-model:limit="queryParams2.pageSize" @pagination="getList2" />
		</el-dialog>
		<el-dialog class="detailDialog" v-model="detailDialog" title="查看日报" top="6vh" width="50.5%">
			<table class="mailTable">
				<tr>
					<td class="column ">姓名</td>
					<td class="nrkd">{{ rbDetail.createBy }}</td>
					<td class="column ">日期</td>
					<td class="nrkd">{{ rbDetail.reportDate }}</td>
				</tr>
				<tr>
					<td class="column">项目</td>
					<td class="nrkd">{{ rbDetail.projectName }}</td>
					<td class="column ">工时</td>
					<td class="nrkd">{{ rbDetail.workHours }}小时</td>
				</tr>
				<tr>
					<td rowspan="2" class="column">工作内容</td>
					<td rowspan="2" class="nrkd lineHeight rbnr" colspan="3"><div class="nrHz" v-html="rbDetail.content" @click="wrapClick($event)"></div></td>
				</tr>
			</table>
		</el-dialog>
		<div class="bigImg" v-if="isBigImg">
			<div class="close" @click="closeImg">
				<el-icon :size="40" color="#ffffff"><Close /></el-icon>
			</div>
			<img ref="bigImg" :src="imgSrc" alt="" @wheel="imgWheel"/>
		</div>
	</div>
</template>

<script setup>
import { getWorkHourList, getReportByDate, getReportListByProject } from '@/api/hkd';
import useUserStore from '@/store/modules/user';
import { ElMessage, ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance();
const loading = ref(true);
const tableList = ref([]);
const total = ref(0);
const total2 = ref(0);
const loading2 = ref(true);
const projectId = ref('');
const projectName = ref('');
const rbList = ref([]);
const rbDetail = ref([]);
const dialog = ref(false);
const detailDialog = ref(false);
const isBigImg = ref(false);
let imgSrc = ref(null);
const imgWheel = (e) => {
	if (imgSrc.value) {
		var zoom = parseInt(proxy.$refs['bigImg'].style.zoom, 10) || 100;
		zoom += event.wheelDelta / 12;
		if (zoom > 0) {
			proxy.$refs['bigImg'].style.zoom = zoom + '%';
		} 
		
	}
	return false;
}

const data = reactive({
	queryParams: {
		pageNum: 1,
		pageSize: 10
	},
	queryParams2: {
		pageNum: 1,
		pageSize: 10
	}
});


const { queryParams, queryParams2 } = toRefs(data);
onMounted(() => {
	if (proxy.$route.query) {
		projectId.value = proxy.$route.query.projectId;
		projectName.value = proxy.$route.query.projectName;
		getList();
	}
});
const wrapClick = (e,center) => {
	if (e.target.tagName == 'IMG') {
		let src = e.target.currentSrc;
		imgSrc.value = src;
		isBigImg.value = true;
	}
}

const closeImg = () => {
	imgSrc.value = null;
	isBigImg.value = false;
}

//查看日报详情
function seeRbDetail(item) {
	detailDialog.value = true;
	item.content = getImgSrc(item.content);
	rbDetail.value = item;
}
const getImgSrc = richtext => {
	if (richtext.indexOf('src="') != -1) {
		if (richtext.indexOf('http') != -1 || richtext.indexOf('https') != -1) {
			return richtext;
		}
		richtext = richtext.replaceAll('src="', 'src="' + import.meta.env.VITE_APP_BASE_API + '');
	}
	return richtext;
};

/** 导出按钮操作 */
function handleExport() {
	proxy.download(
		'project/exportExl',
		{
			projectId: projectId.value
		},
		`${projectName.value}工时统计.xls`
	);
}

function getList() {
	loading.value = true;
	queryParams.value.projectId = projectId.value;
	getWorkHourList(queryParams.value).then(response => {
		tableList.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}

function clear() {
	queryParams2.value.pageNum = 1;
	queryParams2.value.pageSize = 10;
	queryParams2.value.reportDate = '';
}
function reset() {
	queryParams2.value.pageNum = 1;
	queryParams2.value.pageSize = 10;
	queryParams2.value.reportDate = '';
	getList2();
}
//根据userName获取这个人的所有日报
function seeRb(userName) {
	dialog.value = true;
	queryParams2.value.userName = userName;
	queryParams2.value.projectId = projectId.value;
	getList2();
}
function getList2() {
	getReportListByProject(queryParams2.value).then(res => {
		if (res.code === 200) {
			rbList.value = res.rows;
			total2.value = res.total;
			loading2.value = false;
		} else {
			ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 });
		}
	});
}
</script>

<style lang="scss" scoped>
.qjButtonBox {
	padding: 20px 30px;
}

.dialog-footer button:first-child {
	margin-right: 10px;
}
:deep(.el-form) {
	display: flex;
	.left {
		// height: 100px;
		border-right: 2px dashed #e5e1e1;
	}
}
.userOption {
	display: flex;
	align-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;

	img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	span {
		padding: 0 1rem;
	}
}
.sxm {
	margin-top: 20px;
}
.spBox,
.spBox2 {
	display: flex;
	flex-flow: column;

	p {
		margin-top: 0;
	}
	img {
		width: 45px;
		height: 45px;
		border-radius: 50%;
	}
}
.spBox2 {
	margin-right: 20px;
}
:deep(.left) {
	width: 50%;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
}
:deep(.right) {
	margin-left: 50px;
	width: 42%;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
	.spr,
	.csr {
		margin-bottom: 10px;
		.el-form-item__label {
			width: 70px !important;
		}
	}
}
.csrBox {
	margin-top: 20px;
	display: flex;
	max-height: 235px;
	overflow: auto;
	display: flex;
	flex-flow: wrap;
}
.csrBox::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}

.ztbox {
	display: flex;
	align-items: center;
	justify-content: center;
	.dian {
		margin-right: 8px;
		width: 7px;
		height: 7px;
		border-radius: 50%;
	}
}
.czan {
	display: flex;
	justify-content: center;
}
#printDivdyAll {
	margin-top: -23px;
	width: 1000px;
	height: 400px;
	padding: 5px;

	td {
		text-align: center;
		font-size: 18px;
	}

	.zhai {
		height: 60px;
	}

	.shense {
		font-size: 20px;
	}

	table {
		width: 100%;
		height: 100%;
	}
}
.zBox {
	height: 99.8%;
	background-color: #ffffff;
	border-radius: 10px;
	padding: 20px;
}

.sptop {
	margin-top: 20px;
}
:deep(.bz) {
	.el-form-item__label {
		width: 50px !important;
	}
}
.red {
	color: #ff0000;
}
.spzt {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-size: contain;
	margin-right: 10px;
}
.jdbox {
	position: relative;
}
.jdbox:last-child .xuLine {
	display: none;
}
.xuLine {
	position: absolute;
	width: 1px;
	height: 17px;
	border-left: 2px dashed rgb(204, 204, 204);
	left: 9px;
	top: 20px;
}
:deep(.qjTable) {
	.el-table__header-wrapper,
	.el-table__fixed-header-wrapper {
		th {
			word-break: break-word;
			background-color: #f7f7f7 !important;
			color: #515a6e;
			height: 58px !important;
			font-size: 13px;
			border: none !important;
		}
	}

	.el-table__body-wrapper {
		.el-button [class*='el-icon-'] + span {
			margin-left: 1px;
		}
		.el-table__row {
			td {
				border: none !important;
				height: 54px;
			}
		}
	}
}
.title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.top {
	background: #ffffff;
	padding: 20px 0;
	padding-top: 0;
	border-radius: 10px;
	.el-form {
		display: flex;
		justify-content: end;
	}
}
.top .el-form-item--default {
	margin-bottom: 0 !important;
}
.cx {
	margin-right: 20px;
}
:deep(.shbj) {
	color: #be1a21;
	width: 140px;
	background-size: 100% 100%;
	padding: 5px 15px;
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: 600;
}
.qjBut {
	background: #be1a21;
	color: #ffffff;
	width: 100px;
	text-align: center;
	border-radius: 4px;
	padding: 10px 0;
	font-size: 0.875rem;
	cursor: pointer;
	span {
		margin: 0 !important;
		font-weight: 400;
	}
}
.qjBut::before {
	content: '';
	padding-left: 20px;
	background: url(../../assets/images/mainImg/dc.png) no-repeat;
	background-size: 90%;
}
.lineHeight {
	height: 82px;
	letter-spacing: 2px;
}
:deep(.detailDialog) {
	min-height: 821px;
}
.nrHz {
	max-height: 500px;
	overflow: auto;
}
:deep(.dialog) {
	// .el-dialog__body{
	// 	padding-top: 0!important;
	// }
}
:deep(.rbnr) {
	img {
		width: 125px;
	}
}
.bigImg{
	z-index: 10000000;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.45);
	overflow-y: auto;
	.close{
		width: 50px;
		height: 50px;
		position: absolute;
		top: 40px;
		right: 40px;
		cursor: pointer;
		background-color: #606266;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	img{
		min-width: 500px;
		max-width: 1800px;
		max-height: 900px;
		
	}
}
</style>
